<template>
  <div>
    <el-page-header @back="goBack" content="上传商品"> </el-page-header>
    <span style="color: #666; fontsize: 14px">请输入商品标题：</span>
    <el-input
      style="width: 300px"
      type="text"
      placeholder="请输入标题"
      v-model="goodsTitle"
      maxlength="10"
      show-word-limit
    >
    </el-input
    ><br />
    <span style="color: #666; fontsize: 14px">请输入商品价格：</span>
    <el-input
      style="width: 300px"
      type="text"
      placeholder="请输入价格"
      v-model="goodsPrice"
      maxlength="10"
      show-word-limit
    >
    </el-input
    ><br />
    <span style="color: #666; fontsize: 14px">请输入商品分类：</span>
    <el-select v-model="goodsClassify" placeholder="请选择">
      <el-option
        v-for="(item, index) in classifyList"
        :key="item.id"
        :label="item.name"
        :value="index"
      >
      </el-option>
    </el-select>
    <span style="color: #666; fontsize: 14px">请上传图片：</span>
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      goodsTitle: "",
      goodsPrice: 0,
      goodsClassify: "",
      goodsContent: "",
      goodsMainPic: "",
      classifyList: [],
      imageUrl: "",
    };
  },
  created() {
    this.getClassify();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 添加商品
    addGoods() {
      this.$http({
        path: "/goods/findAll",
        params: {
          method: "post",
          title: this.goodsTitle,
          price: this.goodsPrice,
          classify: this.goodsClassify,
          content: this.goodsContent,
          mainPic: this.goodsMainPic,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    // 查找分类
    getClassify() {
      this.currentPage = 1;
      this.$http({
        path: "/classify/query",
      }).then((res) => {
        console.log(res);
        this.classifyList = res.data.data;
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
.el-page-header {
  margin-bottom: 10px;
}
.el-input {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>